<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>浮动多列布局</title>
    <style type="text/css">
      .container {
        margin: 0 auto;
        width: 1000px;
      }
      .wrapper {
        margin: 10px;
      }

      .wrapper:nth-child(1) {
        width: 48%;
        float: left;
      }
      .wrapper:nth-child(2) {
        width: 48%;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="wrapper">
        <h1>Article Title</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
          aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
          pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet
          nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at
          porta. Integer ligula ipsum, tristique sit amet orci vel, viverra
          egestas ligula. Curabitur vehicula tellus neque, ac ornare ex
          malesuada et. In vitae convallis lacus. Aliquam erat volutpat.
          Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
          pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
          quam nec lacus varius commodo et a urna. Ut id ornare felis, eget
          fermentum sapien.
        </p>
      </div>
      <div class="wrapper">
        <h1>Article Title</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
          aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
          pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet
          nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at
          porta. Integer ligula ipsum, tristique sit amet orci vel, viverra
          egestas ligula. Curabitur vehicula tellus neque, ac ornare ex
          malesuada et. In vitae convallis lacus. Aliquam erat volutpat.
          Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
          pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
          quam nec lacus varius commodo et a urna. Ut id ornare felis, eget
          fermentum sapien.
        </p>
      </div>
      <div class="wrapper">
        <h1>Article Title</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
          aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
          pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet
          nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at
          porta. Integer ligula ipsum, tristique sit amet orci vel, viverra
          egestas ligula. Curabitur vehicula tellus neque, ac ornare ex
          malesuada et. In vitae convallis lacus. Aliquam erat volutpat.
          Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
          pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
          quam nec lacus varius commodo et a urna. Ut id ornare felis, eget
          fermentum sapien.
        </p>
      </div>
    </div>
  </body>
</html>
